import React from 'react'
import { Card, Button, Form, Input, Select, Table, Space } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { SearchOutlined } from '@ant-design/icons'
const { Option } = Select //注意: Option是从Select解构出来的
export default function HospitalList() {
  // 用来管理Table组件的表头和对应列展示什么数据
  interface Iobj {
    hosname: string
  }

  const data: Iobj[] = [
    {
      hosname: '123',
    },
  ]
  const columns: ColumnsType<Iobj> = [
    {
      title: '序号',
      render(_: any, records: any, index: number) {
        return index + 1
      },
      align: 'center',
    },
    {
      title: '医院logo',
      render(_: any, records: any, index: number) {
        return <img src="" alt="" />
      },
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
    },
    {
      title: '详细地址',
    },
    {
      title: '状态',
    },
    {
      title: '创建时间',
    },
    {
      title: '操作',
      render() {
        return (
          <Space>
            <Button type="primary">查看</Button>
            <Button type="primary">排班</Button>
            <Button type="primary">上线</Button>
          </Space>
        )
      },
      align: 'center',
    },
  ]
  return (
    <Card>
      <Form layout="inline">
        <Form.Item name="provinceCode" style={{ width: 180 }}>
          {/* 注意: defaultValue是用于第一次打开页面,选择默认的选项. 但是如果选项要改变,则defaultValue就无效了. 正常应该使用value */}
          <Select placeholder="请选择省" value="bj">
            <Option value="gd">广东</Option>
            <Option value="bj">北京</Option>
          </Select>
        </Form.Item>
        <Form.Item name="cityCode" style={{ width: 180 }}>
          <Select placeholder="请选择市">
            <Option>深圳</Option>
            <Option>广州</Option>
          </Select>
        </Form.Item>
        <Form.Item name="districtCode" style={{ width: 180 }}>
          <Select placeholder="请选择区">
            <Option>宝安区</Option>
            <Option>南山区</Option>
          </Select>
        </Form.Item>
        <Form.Item name="hosname" style={{ width: 180 }}>
          <Input placeholder="医院名称"></Input>
        </Form.Item>
        <Form.Item name="hoscode" style={{ width: 180 }}>
          <Input placeholder="医院编码"></Input>
        </Form.Item>
        <Form.Item name="hostype" style={{ width: 180, marginTop: 20 }}>
          <Select placeholder="医院类型">
            <Option>三级甲等</Option>
            <Option>二级甲等</Option>
          </Select>
        </Form.Item>
        <Form.Item name="status" style={{ width: 180, marginTop: 20 }}>
          <Select placeholder="医院状态">
            <Option>已上线</Option>
            <Option>未上线</Option>
          </Select>
        </Form.Item>
        <Form.Item style={{ marginTop: 20 }}>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>

        <Form.Item style={{ marginTop: 20 }}>
          <Button>清空</Button>
        </Form.Item>
      </Form>

      <Table
        columns={columns}
        dataSource={data}
        style={{ marginTop: 20 }}
      ></Table>
    </Card>
  )
}
